<template>
  <div class="movie-wall">
    <div v-for="movie in movies" :key="movie.id" class="movie-item" @click="onClickMovie(movie.id)">
      <div class="movie-item__img">
        <img :src="getPosterUrl(movie.poster_path)" :alt="movie.name" />
        <div class="movie-item__rating">{{ movie.vote_average.toFixed(1) }}</div>
      </div>
      <div class="movie-item__info">
        <h3>{{ movie.name }}</h3>
        <p>{{ movie.first_air_date }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import API from '@/api'
import { useRouter } from 'vue-router'
const router = useRouter()
const movies = ref([])

// 获取电影海报的完整 URL
const getPosterUrl = (path) => `https://image.tmdb.org/t/p/w500${path}`
const onClickMovie = (id) => {
  // 跳转到电影详情页
  router.push({ path: '/home/tv/detail', query: { id } })
}

onMounted(() => {
  // setMovies()
  // 从 API 获取电影数据
  API.getTvList({ page: 1, page_size: 100 }).then((res) => {
    movies.value = res.rows
  })
})
</script>

<style lang="less" scoped>
.movie-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: left;
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.movie-item {
  width: 200px;
  text-align: center;

  .movie-item__img {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 10px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .movie-item__rating {
      position: absolute;
      bottom: 10px;
      left: 10px;
      background-color: rgba(0, 0, 0, 0.7);
      color: #fff;
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 14px;
    }
  }

  .movie-item__info {
    margin-top: 10px;
    text-align: left;

    h3 {
      font-size: 18px;
      margin-bottom: 5px;
    }

    p {
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
